<template>
	<view class="container">
	  <view class="top_box flex_box">
	    <view class="flex1">
	      <view class="tell">投诉电话：{{complaintPhone || '暂无'}}</view>
	      <view class="text">{{orderTips}}</view>
	    </view>
	    <view class="ewm_box" v-if="groupAddr">
	      <image :src="groupAddr" class="ewm"></image>
	      <view class="ewm_title">家庭教育群</view>
	    </view>
	  </view>
	  <view class="form_box">
	    <view class="form">
	      <view class="form_header">预留信息</view>
	      <view class="flex_box form_item">
	        <view class="label">姓名</view>
	        <input class="flex1 weui-input" placeholder="请输入姓名" placeholder-class='iptplaceholder' v-model="info.customerName"/>
	      </view>
	      <view class="flex_box form_item">
	        <view class="label">手机</view>
	        <input class="flex1 weui-input" placeholder="请输入手机号码" placeholder-class='iptplaceholder' v-model="info.customerPhone"/>
	      </view>
	      <view class="flex_box form_item">
	        <view class="label">地址</view>
	        <input class="flex1 weui-input" placeholder="请输入居住地址" placeholder-class='iptplaceholder' v-model="info.customerAddr"/>
	      </view>
	      <!-- <view class="flex_box form_item">
	        <view class="label">需求</view>
	        <input class="flex1 weui-input" placeholder="初二学生补数学物理" placeholder-class='iptplaceholder' v-model="info.desc"/>
	      </view> -->
	    </view>
	  </view>
	  <view class="list_wrap" v-if="orderInfo">
	    <view class="list_item flex_box" v-for='item in orderInfo.list' :key='item.id'>
	      <!-- <image src="@/static/images/check.png" class="check_icon"></image> -->
	      <image :src="item.teacherInfo.headPic" class="avatar"></image>
	      <view class="flex1">
	        <view class="title">{{item.teacherInfo.teacherName}}</view>
	        <view class="tags flex_box">
	          <view class="tag tag_green" v-if="item.teacherInfo.teachStyle1">{{item.teacherInfo.teachStyle1}}</view>
	          <view class="tag tag_green" v-if="item.teacherInfo.teachStyle2">{{item.teacherInfo.teachStyle2}}</view>
	          <view class="tag tag_organge" v-if="item.teacherInfo.teachStyle3">{{item.teacherInfo.teachStyle3}}</view>
	          <!-- <view class="tag tag_green" v-if="getDayStatus(item.teacherInfo,1)">周六{{getDayStatus(item.teacherInfo,1)}}</view>
	          <view class="tag tag_green" v-if="getDayStatus(item.teacherInfo,2)">周日{{getDayStatus(item.teacherInfo,2)}}</view> -->
	        </view>
	        <view class="flex_between">
	          <view class="price">¥{{item.teacherInfo.classPrice}}/时</view>
	          <view class="flex_box">
	            <!-- <image src="@/static/images/add1.png" class="add_icon"></image> -->
	            <view class="num">x{{item.teachCount}}</view>
	            <!-- <image src="@/static/images/add.png" class="add_icon"></image> -->
	          </view>
	        </view>
	      </view>
	    </view>
	  </view>
	  <view class="control_box flex_box">
	    <view class="flex1 flex_box_end">
	      <view class="heji">合计：</view>
	      <view class="total">￥{{orderInfo.orderAmt}}</view>
	    </view>
	    <view class="btn org_btn" @tap="wxPayUnifiedOrder">去支付</view>
	  </view>
	  <!-- <payDialog ref='payDialog'></payDialog> -->
	</view>

</template>

<script>
	import payDialog from '@/components/payDialog.vue'
	import {getDayStatus,toast} from '@/common/js/public.js'
	export default {
		components:{
			payDialog
		},
		data() {
			return {
				customerInfo:'', // 登录信息
				ip:'', // ip
				info:{
					customerName:'',
					customerPhone:'',
					customerAddr:'',
					customerChildrenCount:'',
					customerCity:'',
					customerCode:''
				}, // 家长信息
				groupAddr:'', // 二维码
				complaintPhone:'', // 投诉电话
				orderTips:'',
				position:'',
				wxPayInfo:'', // 下单支付参数
				orderInfo:'' // 订单数据
			}
		},
		onLoad() {
			this.orderInfo = uni.getStorageSync('pay_param')
			this.customerInfo = uni.getStorageSync('tutor_customerInfo') || ''
			this.position = uni.getStorageSync('tutor_position') || ''
			this.queryCustomerInfoByOpenId()
			uni.request({
			  url:'http://pv.sohu.com/cityjson?ie=utf-8',
				method:'POST',
				success: (res) => {
			    const reg = /\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}/;
					let ip = reg.exec(res.data);
					if (ip&&ip.length>0) {
						this.ip = ip[0]
					}
				}
			})
		},
		methods: {
			queryCustomerInfoByOpenId() {
				let param = {
					customerAppId:this.customerInfo.customerAppId,
					customerOpenId:this.customerInfo.customerOpenId,
					customerUnionId:this.customerInfo.customerUnionId
				}
				this.$api.queryCustomerInfoByOpenId(param).then(res=>{
					if (res.data) {
						for(let key in this.info) {
							this.info[key] = res.data[key]
						}
						if(!this.info.customerChildrenCount) {
							this.info.customerChildrenCount = 0
						}
						if(!this.info.customerCity) {
							this.info.customerCity = this.position?this.position.city:''
						}
						this.groupAddr = res.data.groupAddr
						this.complaintPhone = res.data.complaintPhone
						this.orderTips  =res.data.orderTips
					}
				})
			},
			showDialog() {
				this.$refs.payDialog.show()
			},
			getDayStatus(item,type) {
				return getDayStatus(item,type)
			},
			//下单
			wxPayUnifiedOrder() {
				let orderDetail = []
				this.orderInfo.list.forEach(ele=>{
					orderDetail.push({
						"classPrice": ele.teacherInfo.classPrice,
						"orderAmt": ele.teacherInfo.classPrice * ele.teachCount,
						// orderAmt:0.01,
						"orderCount": ele.teachCount,
						"teacherNo": ele.teacherNo
					})
				})
				let param = {
					"customerCode": this.customerInfo.customerCode,
					"orderAmt": this.orderInfo.orderAmt,
					// orderAmt:0.01,
					"orderDetail": orderDetail,
					"shoppingcartFlag": this.orderInfo.shoppingcartFlag,
					"spbillCreateIp": this.ip,
					"customerInfo":this.info
				}
				this.$api.wxPayUnifiedOrder(param).then(res=>{
					if (res.code == 1) {
						this.wxPayInfo = res.data
						uni.requestPayment({
						    provider: 'wxpay',
						    timeStamp: res.data.orderResult.timeStamp,
						    nonceStr: res.data.orderResult.nonceStr,
						    package: res.data.orderResult.packageValue,
						    signType: res.data.orderResult.signType,
						    paySign: res.data.orderResult.paySign,
						    success: (res) => {
						      console.log(res)
									this.queryOrderWxPayResult()
						    },
						    fail: (err) =>{
						      console.log(err)
						    }
						});
					} else {
						toast(res.msg)
					}
				})
			},
			//查询微信订单支付结果
			queryOrderWxPayResult() {
				let param = {
					orderNo:this.wxPayInfo.orderNo
				}
				this.$api.queryOrderWxPayResult(param).then(res=>{
					if (res.code == 1) {
						uni.showModal({
						    title: '提示',
						    content: '支付成功，查看课程',
						    success: (res) => {
									if (res.confirm) {
										uni.switchTab({
											url:'/pages/course/course'
										})
									} else if (res.cancel) {
										
									}
						    }
						});
					} else {
						toast('支付失败')
					}
				})
			}
		}
	}
</script>

<style scoped>
	@import '../../common/common.css';
	.top_box{
	  margin-bottom:20rpx;
	  padding:20rpx 30rpx;
	  background-color: #fff;
	}
	.form_box{
	  padding:0 30rpx;
	  margin-bottom: 20rpx;
	}
	.form{
	  padding:20rpx;
	  border-radius: 20rpx;
	  background:#fff;
	}
	.form_header{
	  line-height: 38rpx;
	  margin-bottom: 20rpx;
		font-weight: bold;
	}
	.form_item{
	  margin-bottom: 20rpx;
	}
	.label{
	  color:#666;
	  margin-right: 30rpx;
	}
	.weui-input{
	  color:#333;
	}
	.control_box{
	  position: fixed;
	  left: 0;
	  bottom:0;
	  width: 100%;
	  padding:15rpx 30rpx;
	  box-sizing: border-box;
	  background-color: #fff;
	}
	.org_btn{
	  width: 260rpx;
	  height: 70rpx;
	  line-height: 70rpx;
	  background-color: #EA7355;
	  border-radius: 70rpx;
	  margin-left: 30rpx;
	}
</style>
